<template>
	<view>
		<view class="index_search">
			<uni-icons class="scan" type="scan" color="#fff" size="26" @click="scan"></uni-icons>
			<input @click="$nav('/pages/search/index')" class="uni-input" placeholder-class="qwicon qwicon_search" placeholder-style="color:#D7D7D7"  placeholder="  快来搜索喜欢的商品..."  />
			<uni-icons @click="$nav('/pages/chat/index')" color="#fff" class="chat" type="chat" size="26"></uni-icons>
		</view>
		<view class="index_banner">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000">
				<swiper-item v-for="(v,k) in banner" :key="k">
					<view class="swiper-item"><image :src="v.image_url||''" mode="aspectFill"></image></view>
				</swiper-item>
			<!-- 	<swiper-item>
					<view class="swiper-item"><image src="../../static/banner/banner3.jpg" mode="aspectFill"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="../../static/banner/banner4.jpg" mode="aspectFill"></image></view>
				</swiper-item> -->
			</swiper>
		</view>
		
		<!-- 栏目 -->
		<view class="index_categral">
			<uni-grid v-if="classList.length>0" :column="5" :show-border="false"  :square="false" :highlight="false">
			   <uni-grid-item v-for="(v,k) in classList" :key="k">
			        <view class="item" @click="toNav(k)">
			        	<image :src="v.thumb||'../../static/class_000'+(k+1)+'.png'" mode=""></image>
			        	<view>{{v.name||'商品栏目'}}</view> 
			        </view>
			    </uni-grid-item>
			</uni-grid>
			<uni-grid v-else :column="5" :show-border="false"  :square="false" :highlight="false">
			   <uni-grid-item v-for="(v,k) in 5" :key="k">
			        <view class="item" @click="toNav(k)">
			        	<image :src="'../../static/class_000'+(v)+'.png'" mode=""></image>
			        	<view>{{'商品栏目'}}</view> 
			        </view>
			    </uni-grid-item>
			</uni-grid>
		</view>
	
		<!-- 广告图 -->
		<view class="index_adv"><image :src="adv.length>0?adv[0].image_url:'../../static/index_adv01.jpg'" mode="aspectFill"></image></view>
		
		<!-- 专场 -->
		<view class="index_special">
			<view class="seckill_special" @click="$nav('/pages/skill/index')">
				<view>
					<text class="title">秒杀活动</text>
					<text class="time">{{skill_time}}</text>
				</view>
			</view>
			<view class="other_special">
				<view class="tuan" @click="$nav('/pages/group/index')"><text class="title">拼团活动</text></view>
				<view class="integral" @click="$nav('/pages/user/integral/index')"><text class="title">积分商城</text></view>
			</view>
		</view>
		
		<!-- 精品推荐 -->
		<view class="index_tj">
			<view class="title">
				<text class="text">热门销售</text>
				<text class="en">Hot sales</text>
				<!-- <text class="more">查看全部</text> -->
			</view>
			
			<view class="list">
				<mescroll-body style="min-height: 0;" ref="mescrollRef" @up="upCallback" :down="downOption">
					<uni-grid :column="2" :show-border="false"  :square="false" :highlight="false">
							<uni-grid-item class="grid_item" v-for="(v,k) in list" :key="k">
								<view class="item" @click="$nav('/pages/goods/info?id='+v.id)">
									<image :src="v.goods_master_image||''" mode="aspectFill"></image>
									<view  class="goods_name">{{v.goods_name||'等待加载...'}}</view>
									<view class="price">
										<text class="goods_price">￥{{v.goods_price||'0.00'}}</text>
										<text class="market_price">￥{{v.goods_price||'0.00'}}</text>
									</view>
								</view>
							</uni-grid-item>
					</uni-grid>
				</mescroll-body>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import moment from "moment";  
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {uniIcons,uniGrid,uniGridItem},
		data() {
			return {
				params:{
					page:1,
					per_page:10,
				},
				downOption:{
					use:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				list:[],
				banner:[],
				adv:[],
				classList:[],
				skill_time: '00:00',
			}
		},
		onLoad() {
			this.skill_time = moment().format('H')+':00'
			// this.getData();
		},
		methods: {
			scan(){
				// #ifdef H5
				return this.$toast('H5无法进行二维码扫描');
				// #endif
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						uni.setStorageSync('inviter_id',res.result);
						return this.$nav('/pages/auth/register')
				    }
				});
			},
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				this.$http(this.$api.index,this.params).then(res=>{
					// console.log(res.data.banner)
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
							this.classList = res.data.goods_class; 
							// 幻灯片和广告图
							this.banner = res.data.banner||[];
							this.adv = res.data.nav_bottom_adv||[];
						}
						this.list = this.list.concat(res.data.hot_goods.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.hot_goods.total); 
					}
				})
			},
			toNav(e){
				uni.switchTab({
					url:'/pages/index/category',
					success() {
						uni.setStorageSync('class_id',e)
					},
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.index_tj{
	margin:60rpx 30rpx;
	.title{
		width: 100%;
		margin-bottom: 40rpx;
		.en{margin-left: 20rpx;color:#999;font-size: $uni-font-size-base;}
		.text{margin-left: 15rpx;font-weight: bold;}
		.more{font-size: $uni-font-size-sm;text-align: right;}
	}
	.list{
		.grid_item:nth-child(2n){
			.item{
				margin-right: 0;
				margin-left: 10rpx;
			}
		}
		.item{
			margin-right: 10rpx;
			margin-bottom: 30rpx;
			border-radius: 6rpx;
			background: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			image{width: 100%;background: #eee;border-radius: 6rpx;height: 260rpx;box-sizing: border-box;}
			.price{
				.goods_price{color:$uni-color-error;margin-right: 20rpx;}
				.market_price{color:#ccc;font-size: $uni-font-size-sm;text-decoration: line-through;}
			}
			.goods_name{line-height: 60rpx;text-align: left;font-size: $uni-font-size-base;width: 100%;overflow: hidden; white-space: nowrap;text-overflow:ellipsis; }
		}
	}
}
.index_special{
	margin:30rpx;
	display: flex;
	height: 350rpx;
	font-size: $uni-font-size-lg;
	.seckill_special{
		flex: 1;
		margin-right: 20rpx;
		background: url(); 
		background-size: 100%;
		background-color: #f1f1f1;
		height: 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		.title{font-weight: bold;margin-right: 20rpx;padding-left: 30rpx;}
		.time{font-size: $uni-font-size-sm;background-color: $uni-color-error;color:#fff;border-radius: 10rpx;padding: 0 20rpx;}
	}
	.other_special{
		flex: 1;
		.title{font-weight: bold;margin-left: 30rpx;}
		.tuan{
			background: url();
			background-size: 100%;
			background-color: #f1f1f1;
			height: 165rpx;margin-bottom: 20rpx;padding-top: 30rpx;box-sizing: border-box;border-radius: 10rpx;
			}
		.integral{
			background: url();
			background-size: 100%;
			background-color: #f1f1f1;
			height: 165rpx;box-sizing: border-box;padding-top: 30rpx;border-radius: 10rpx;
			}
	}
}
.index_adv{
	background: #eee;
	margin:0 30rpx ;
	height: 150rpx;
	border-radius: 10rpx;
	image{
		width: 100%;
		height: 150rpx;
		border-radius: 10rpx;
	}
}
.index_categral{
	margin:0 20rpx;
	.item{
		padding-bottom: 30rpx;
		padding-top: 20rpx;
		text-align: center;
		font-size: $uni-font-size-base;
		image{
  			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			background: #eee;
			margin-bottom: 15rpx;
		}
	}
}	
.index_banner{box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 30rpx;margin:30rpx;height: 350rpx;.swiper,swiper-item,.swiper-item{height: 350rpx;border-radius: 30rpx;}image{width: 100%;}}
.index_search{
	display: flex;
	padding-top: calc(var(--status-bar-height) + 30rpx);
	padding-bottom: 30rpx;
	background: $uni-color-error;
	.scan{
		flex: 0 1 30rpx;
		padding: 0 30rpx;
		line-height: 66rpx;
	}
	.chat{
		flex: 0 1 30rpx;
		padding: 0 30rpx;
		line-height: 66rpx;
	}
	.uni-input{
		flex: 1;
		// border:1px solid #f1f1f1;
		background: #fff;
		border-radius: 25rpx;
		padding: 12rpx 0;
		font-size: $uni-font-size-base;
		color:#fff;
		text-align: center;
	}
}
</style>
